<template>
<div class="form-config">
  <div class="title">节点表单</div>
  <div class="item group">
    <div class="name"></div>
    <div>
      <el-checkbox v-model="readonly" @change="allReadChanged">只读</el-checkbox>
      <el-checkbox v-model="isRequire" @change="allRequireChanged">必填</el-checkbox>
      <el-checkbox v-model="hide" @change="allHiddenChanged">隐藏</el-checkbox>
    </div>
  </div>
  <template v-for="item in form.formConfig">
    <div :key="item.businessId" :class="item.fieldType === 'group' ? 'group' : ''" class="item">
      <div class="name">{{item.fieldName}}</div>
      <div>
        <el-checkbox v-model="item.readonly" @change="readChange" :disabled="item.fieldType === 'group'">只读</el-checkbox>
        <el-checkbox v-model="item.require" @change="requireChange" :disabled="item.fieldType === 'group'">必填</el-checkbox>
        <el-checkbox v-model="item.hide" @change="hiddenChange">隐藏</el-checkbox>
      </div>
    </div>
  </template>
  <template v-if="!isFirstNode">
  <div class="title" style="margin-top: 24px">页签设置</div>
  <draggable :list="form.tabConfig" handle=".move"  animation="150" @end="moveEnd"
				@drop.native.stop.prevent="">
    <div class="page-item" v-for="(item,index) in form.tabConfig" :key="index">
      <div class="move" style="cursor:move" title="拖动排序"><i style="font-size:12px" class="V7_iconfont V7_iconV7tubiao_yidong"></i></div>
      <el-input v-model="item.name" clear="name" maxlength="20" @blur="changeName(item)"  :placeholder="'默认值为' + item.defaultName"></el-input>
      <i class="el-icon-success" :class="item.enable ? 'is-enable' : ''" @click.stop="item.enable = !item.enable"></i>
    </div>
  </draggable>
  </template>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import draggable from 'vuedraggable';
@Component({
  components: {
    draggable
  }
})
export default class extends Vue {
  @Prop({ default: false }) private isFirstNode!: any
  @Prop({ default: { formConfig: [], tabConfig: [] } }) private form!: any
  private readonly = false
  private isRequire = false
  private hide = false

  private allReadChanged () {
    this.handleAllChange(this.readonly, 'readonly')
  }

  private changeName (item) {
    if (!item.name) {
      this.$set(item, 'name', item.defaultName)
    }
  }

  private handleAllChange (flag: boolean, type: string) {
    this.form.formConfig.map(item => {
      item[type] = flag
    })
  }

  private allRequireChanged () {
    this.handleAllChange(this.isRequire, 'require')
  }

  private allHiddenChanged () {
    this.handleAllChange(this.hide, 'hide')
  }

  private requireChange () {
    this.singleChange('require')
  }

  private hiddenChange () {
    this.singleChange('hide')
  }

  private readChange () {
    this.singleChange('readonly')
  }

  private singleChange (type: string) {
    const readLen = this.form.formConfig.filter(item => {
      return item[type] === true || item.fieldType === 'group'
    }).length
    if (readLen !== 0 && readLen === this.form.formConfig.length) {
      if (type === 'readonly') {
        this.readonly = true
      } else if (type === 'hide') {
        this.hide = true
      } else {
        this.isRequire = true
      }
    } else {
      if (type === 'readonly') {
        this.readonly = false
      } else if (type === 'hide') {
        this.hide = false
      } else {
        this.isRequire = false
      }
    }
  }

  private mounted () {
    console.log('111')
  }
}
</script>
<style scoped lang="stylus">
.page-item
  line-height: 32px;
  display: flex;
  width: 300px;
  border: 1px solid #E7E9ED;
  border-radius: 4px;
  align-items: center;
  padding: 0px 12px;
  margin-bottom: 12px;
  .name
    font-weight: 400;
    color: #303753;
  /deep/.el-input__inner
    border: none
.form-config {
  padding: 24px 24px 50px 24px;
}
.title {
  font-weight: 400;
  color: #303753;
  margin-bottom: 12px
}
.item {
  display: flex;
  border-bottom: 1px solid #E7E9ED;
  line-height: 32px
  color: #686E84;
  .name {
    width: 200px
    text-align: center
  }
}
.group {
  background: #FAFAFA;
  font-weight: 400;
  color: #303753;
  margin-top: 12px
  border: 1px solid #e7e9ed;
  border-radius: 4px 4px 0px 0px;
}
.el-icon-success {
  color: #DCDFE6;
  font-size: 14px;
  cursor pointer
}
.is-enable
  color: #008BEE
.V7_iconV7tubiao_yidong {
  color: #B3B9C7;
}
</style>
